<template>
  <div class="appRef" ref="appRef">
    <slot></slot>
  </div>
</template>

<script setup>
import { ref, watch, computed, onMounted, onBeforeUnmount } from "vue";

const appRef = ref(null);
const drawTiming = ref(null);

const resize = function () {
  calcRate();
};

const calcRate = function () {
  if (!appRef.value) return;
  const widthScale = window.innerWidth / 1920; // 基准宽度为1920px
  const offsetX = (window.innerHeight / widthScale - window.innerHeight) / 2;
  appRef.value.style.height = `${window.innerHeight / widthScale}px`;
  appRef.value.style.transform = `scale(${widthScale})`;
  appRef.value.style.transformOrigin = "left center"; // 设置变换的原点为左上角
  appRef.value.style.position = "fixed";
  appRef.value.style.left = `0px`;
  appRef.value.style.top = `${-offsetX}px`;
  appRef.value.style.width = `1920px`;
};

let timer = null;
onMounted(() => {
  window.addEventListener("resize", resize);
  timer = setInterval(() => {
    if (document.querySelector("#usp_entrance_ul")) {
      document.querySelector("#usp_entrance_ul").style.display = "none";
    }
  }, 200);

  resize();
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
  timer = null;
  document.querySelector("#usp_entrance_ul").style.display = "";
});
</script>

<style lang="less" scoped>
.appRef {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform-origin: top left; // 与 JavaScript 中的设置保持一致
}
</style>
